﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../Styles/Register.css" rel="stylesheet" />
    <script src="../JS/jquery-1.4.1.min.js"></script>
    <script src="../JS/validation.js"></script>
</head>
<body>
    <div id="container">
        <form id="myform" name="myform" action="Handlers/RegFormHandler.ashx" method="post">
            <div id="regdiv">
                <fieldset>
                    <legend>jQuery实现的表单验证</legend>
                    <div class="item">
                        <span class="label"><b class="reg">*</b>姓&nbsp;&nbsp;&nbsp;&nbsp;名:</span><input type="text" name="stuname" class="text" id="stuname" />
                    </div>
                    <div class="item">
                        <span class="label"><b class="reg">*</b>性&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
                        <input style="" type="radio" class="radio" name="gender" id="RadioMan" />男
                        <input type="radio" name="gender" id="RadioWomen" class="radio" />女
                    </div>
                    <div class="item">
                        <span class="label"><b class="reg">*</b>手机号码:</span><input type="text" name="stuphone" class="text" id="stuphone" />
                    </div>
                    <div class="item">
                        <span class="label"><b class="reg">*</b>常用邮箱:</span><input type="text" name="stuemail"
                                                                                   class="text" id="stuemail" />
                    </div>
                    <div class="item">
                        <span class="label"><b class="reg">*</b>密&nbsp;&nbsp;&nbsp;&nbsp;码:</span><input type="password" name="stupwd" class="text" id="stupwd" />
                    </div>
                    <div class="item">
                        <span class="label"><b class="reg">*</b>密码确认:</span><input type="password" name="restupwd"
                                                                                   class="text" id="restupwd" />
                    </div>
                    <div class="item">
                        <span class="label"><b class="reg">*</b>身份证号:</span><input type="text" name="stuidno"
                                                                                   class="text" id="stuidno" />
                    </div>
                    <div class="item">
                        <span class="label"><b class="reg">*</b>个人主页:</span><input type="text" name="stuurl"
                                                                                   class="text" id="stuurl" />
                    </div>
                    <div class="item">
                        <input id="provision" type="checkbox" name="provision" value="checkbox" checked="checked" />我同意《喜科堂服务条款》
                    </div>
                    <div class="item">
                        <span class="label"><b class="reg">*</b>验&nbsp;证&nbsp;码:</span><input type="text"
                                                                                              name="checkcode" class="text" id="checkcode" style="width: 50px;" />
                        <img id="checkcodeimg" align="middle" alt="" src="/Code/Code1.ashx" />
                        <input id="btnRefresh" type="button" value="刷新" />
                    </div>
                    <div class="item">
                        <div style="width: 150px; float: left;">
                            <input id="btnreg" type="submit" value="提交注册" />
                            <input id="btnreset" type="reset" value="清空" />
                        </div>
                        <div id="infodiv" style="display: none; width: 300px; float: left; font-size: 12px;">
                            <img align="middle" src="../Images/images/onloading.gif" />
                            <span style="color: Blue;">&nbsp;正在提交数据，请耐心等待...</span>
                        </div>
                        <div id="errordiv" style="display: none; color: Red; font-size: 12px;">
                            对不起，服务器请求超时，请稍后再试！
                        </div>
                    </div>
                </fieldset>
            </div>
        </form>
    </div>
    <script type="text/javascript">
        $("#myform").valid([
            { name: "stuname", isNull: "姓名不能为空", onFocus: "请填写真实的姓名，以便于我们沟通" },
            { name: "gender", type: "radio", isNull: "请选择性别", error: "您还没有选择性别" },
            { name: "stuphone", type: "mobile", onFocus: "未经您授权，任何人看不到您的号码", isNull: "手机号码不能为空", error: "请输入正确的手机号" },
            { name: "stuphone", type: "ajax", error: "手机号码已经被注册！", other: { url: "Handlers/CheckFromDB.ashx?type=mobile"} },
            { name: "stuemail", type: "mail", onFocus: "邮箱是和您沟通的重要方式", isNull: "邮箱不能为空", error: "email格式错误" },
            { name: "stuemail", type: "ajax", error: "邮箱已经被注册！", other: { url: "Handlers/CheckFromDB.ashx?type=email"} },
            { name: "stupwd", type: "password", isNull: "密码不能为空", onFocus: "密码长度6-18位", error: "密码长度6-18位" },
            { name: "restupwd", type: "eq", error: "两次输入密码不相同", other: { to: "stupwd"} },
            { name: "stuidno", type: "bodycard", isNull: "请填写身份证号", error: "身份证号不符合要求" },
            { name: "stuurl", type: "url", isNull: "个人主页不能为空", error: "主页网址无效", onFocus: "示例格式：http://www.xiketang.com" },
            { name: "provision", type: "checkbox", error: "服务条款必须同意", other: { min: 1} },
            { name: "checkcode", type: "ajax", isNull: "验证码不能为空", error: "验证码不正确！", other: { url: "Handlers/CheckFromDB.ashx?type=checkcode"} }
            ], true);

    </script>
</body>
</html>